<!--
 * @Author: jhw jiaxianshengye@gmail.com
 * @LastEditTime: 2025-08-12 14:00:53
 * @LastEditors: jhw
 * @Description: 文件描述
-->
<template>
  <div>
    <Header />
    <div>
      <h1>组件市场</h1>
      <div class="containers">
        <!-- 导航 -->
        <!-- <nav class="category mx-auto"> -->
        <!-- <Router-link class="category-item" to="/materials/select-group">
            <el-icon>
              <CircleCheck />
            </el-icon>
            <div>基础组件</div>
          </Router-link> -->
        <!-- <Router-link class="category-item" to="/materials/enhance-group">
            <el-icon>
              <Files />
            </el-icon>
            <div>增强组件</div></Router-link
          > -->
        <!-- </nav> -->
        <!-- 路由出口 -->
        <div class="coms w-full h-full">
          <RouterView />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Common/Header.vue';
// import {
// CircleCheck,
// Files,
// EditPen,
// ChatLineSquare,
// User,
// Message,
// } from '@element-plus/icons-vue';
</script>

<style scoped lang="scss">
h1 {
  @apply text-center font-100 p-0 h-50px my-20px mx-auto text-2rem leading-normal;
}
.containers {
  @apply flex mx-auto w-1200px h-600px;
}
.category {
  @apply w-70px h-full;
  > .category-item {
    @apply w-70px h-70px flex flex-col justify-center items-center mb-10px text-center no-underline;
    font-size: var(--font-size-base);
    color: var(--white);
    border-top-left-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
  }
  @for $i from 1 through 4 {
    .category-item:nth-child(4n + #{$i}) {
      @if $i == 1 {
        background-color: var(--primary-color);
      } @else if $i == 2 {
        background-color: var(--success-color);
      } @else if $i == 3 {
        background-color: var(--warning-color);
      } @else if $i == 4 {
        background-color: var(--error-color);
      }
    }
  }
}
/* .coms { */
/* width: calc(1180px - 60px); */
/* } */
</style>
